<template>
  <!--热点文章 -->
  <div>
    <div class="flRseniority_just">
      <span>热点文章</span>
      <span></span>
    </div>
    <div class="flrList flrListA">
      <!-- <li v-for="(item,index) in flRseniorityA" :key="index" :class="{thesisA:thesisA===index}" @click="thesisA=index"><router-link :to="{name:'justInTimedetail',query: {id: item.ContentID}}">{{item.Title}}</router-link><span>{{item.AddDate}}</span></li> -->
      <li
        v-for="(item,index) in flRseniorityA"
        :key="index"
        :class="{thesisA:thesisA===index}"
        @click="thesisA=index"
      >
        <a @click="periodicalloogin(item.OpenId)">{{item.Title}}</a>
        <!-- <span>{{item.AddDate}}</span> -->
      </li>
      <!-- <li v-for="(item,index) in flRseniorityA" :key="index" :class="{thesisA:thesisA===index}" @click="thesisA=index">
        <router-link :to="{name:'academicdetail',query: {id: item.OpenId}}">{{item.Title}}</router-link><span>{{item.AddDate}}</span>
      </li>-->
    </div>
  </div>
</template>

<script>
export default {
  name: "justInTime",
  data() {
    return {
      thesisA: "",
      flRseniorityA: [],
      PageIndex: 1,
      PageSize: 5
    };
  },
  methods: {
    getData() {
      // 加密完成
      this.$httphelper
        .post("/api/JournalArticle/GetPaperList", {
          Condition: 3,
          Page: 1,
          Limit: 7
        })
        .then(res => {
          this.flRseniorityA = res.data.data||[];
          this.flRseniorityA.forEach(item => {
            item.AddDate = item.AddDate.substr(0, 10);
          });
        })
        .catch(e => {
          console.log(e);
        });
    },
    periodicalloogin(id) {
      let userName = sessionStorage.getItem("userName");
      if (userName) {
        this.$uniRouter.push({
          path: "/academic/academicdetail",
          query: {
            id: id
          }
        });
      } else {
        this.$confirm("请先登录", "提示", {
          customClass: "message-logout",
          confirmButtonText: "确定",
          cancelButtonText: "取消"
          // type: 'warning'
        })
          .then(() => {
            this.$uniRouter.push({
              path: "/login"
            });
          })
          .catch(e => {
            console.log(e);
          });
      }
    }
  },

  created() {
    this.getData();

    // let pId = this.$route.query.id;
    // if(pId){
    //     this.initOther(pId);
    // }
  }
  // watch: {
  //   //监听相同路由下参数变化的时候，从而实现异步刷新
  //   '$route'(to,from){
  //     this.getData();
  //   },
  // },
  // watch: {
  //   //监听相同路由下参数变化的时候，从而实现异步刷新
  //   '$route'(to,from) {
  //     //做一些路由变化的响应
  //     //打开加载动画
  //     this.loading = true;
  //     //重新获取数据
  //     this.getData();
  //     /** 初始化其他数据 */
  //     let pid = this.$route.query.id;
  //     if(pid){
  //       this.initOther(pid);
  //     }
  //   },
  // },
  // watch: {
  //   //监听相同路由下参数变化的时候，从而实现异步刷新
  //   '$route'(to,from) {
  //     //做一些路由变化的响应
  //     //打开加载动画
  //     this.loading = true;
  //     //重新获取数据
  //     this.getData();
  //     /** 初始化其他数据 */
  //     let pid = this.$route.query.id;
  //     if(pid){
  //       this.initOther(id);
  //     }
  //   },
  // }
};
</script>

<style lang="less" scoped>
.flRseniority_just {
  /deep/.el-pagination__total {
    display: none;
  }
  /deep/.el-pagination__sizes {
    display: none;
  }
  width: 250px;
  height: 32px;
  margin-left: 19px;
  // margin-top: 28px;
  span:nth-child(1) {
    float: left;
    width: 90px;
    height: 32px;
    color: #333;
    font-size: 20px;
    text-align: center;
    line-height: 22px;
    font-family: "SourceHanSansSC-Regular";
    border-bottom: 2px solid #003c80;
    cursor: pointer;
  }
  span:nth-child(2) {
    float: right;
    width: 157px;
    height: 32px;
    color: #333;
    line-height: 22px;
    font-size: 20px;
    text-align: left;
    border-bottom: 2px solid #eeeeee;
    cursor: pointer;
  }
}
.flrList {
  width: 250px;
  margin-left: 19px;
  margin-top: 10px;
  .thesisA {
    a {
      color: #003c80;
    }
    span {
      color: #003c80;
    }
  }
  li:nth-child(1) {
    padding-top: 9px !important;
  }
  li:last-child {
    border-bottom: none;
    padding-bottom: 0px;
  }
  li:hover {
    a {
      color: #003c80;
    }
    span {
      color: #003c80;
    }
  }
  li {
    list-style: none;
    padding: 18px 0px;
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    a {
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      white-space: nowrap;
      // width:169px;
      width: 100%;
      float: left;
      position: relative;
      top: -10px;
      color: #333333;
      font-size: 14px;
      font-weight: bold;
    }
    span {
      float: right;
      font-size: 14px;
      position: relative;
      top: -7px;
    }
    // .router-link-active{
    //   color:#003c80;
    // }
  }
}
</style>
<style>
@media screen and (max-width: 1010px) {
  .message-logout {
    width: 80% !important;
  }
}
</style>